@charset "utf-8";
@import "reset";
@function v($px){
    @return $px/750 * 100vw
}
.main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    z-index: 5;
    background-color: white;
    // 顶部模糊背景图
    .top{
        width: 100%;
        height: v(360);
        filter: blur(20px);
    }    
    // 顶部图片信息
    .content{
        width: 100%;
        padding: v(50) v(30);
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        .left{
            width: v(260);
            height: v(260);
            position: relative;
            overflow: hidden;
            img{       
                width: 100%;
            }
            p{
                position: absolute;
                width: v(100);
                top: v(10);
                left: v(-30);
                line-height: v(36);
                background-color: red;
                color: white;
                font-size: v(20);
                text-align: right;
                padding-right: v(10);
                border-radius: v(30);
            }
            span{
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                color: white;
                font-size: v(20);
                i{
                    display: inline-block;
                    width: v(30);
                    height: v(30);
                    vertical-align: middle;
                    img{
                        width: 100%;
                        color: white;
                    }
                }
            }
        }
        .right{
            width: v(400);
            height: v(260);
            p{
                width: 100%;
                height: v(140);
                font-size: v(30);
                color: white;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2; 
                -webkit-box-orient: vertical; 
            }
            a{
                color: white;
                font-size: v(30);
                .icon{
                    display: inline-block;
                    width: v(50);
                    height: v(50);
                    vertical-align: middle;
                    position: relative;
                    span{
                        position: absolute;
                        display: inline-block;
                        width: v(30);
                        right: v(-10);
                        bottom: v(-15);
                    }
                    img{
                        width: 100%;
                        border-radius: 50%;
                    }
                }
            }
        }   
    }
    //评论,下载,分享,收藏
    .func{
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 v(100);
        a,div{
            display: block;
            text-align: center;
            color: #8a8a8a;
        }
    }
    // 标签，简介
    .info{
        width: 100%;
        margin-top: v(20);
        padding: v(20) v(50);
        background-color: rgb(248, 248, 248);
        color: rgb(102, 102, 102);
        font-size: v(30);
        position: relative;
        .tag{
            span{
                padding: v(6) v(10);
                display: inline-block;
                margin-left: v(20);
                border: 1px solid rgb(213, 213, 214);
                border-radius: v(50);
            }
        }
        .intro{
            margin-top: v(20);
        }
        .details{
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3; 
            -webkit-box-orient: vertical; 
            margin-top: v(8);
            line-height: v(40);
        }
        p{
            width: v(30);
            position: absolute;
            bottom: v(20);
            right: v(60);
            img{
                width: 100%;
            }
        }
    }
    // 歌曲列表标题
    .Title{
        width: 100%;
        padding-left: v(30);
        background-color: rgb(238, 239, 240);
        color: rgb(102, 102, 102);
        font-size: v(30);
        line-height: v(60);
    }
    // 歌曲列表和提醒下载APP
    .music-list{
        position: relative;
        li{
            position: relative;
            display: flex;
            align-items: center;
            padding: vw(10) 0;
            border-bottom: 1px solid rgb(224, 224, 224);
            .num{
                width: vw(80);
                color: #df3436;
                font-size: vw(35);
                text-align: center;
            }
            .music-msg{
                text-align: left;
                h3{
                    width: vw(500);
                    font-size: vw(35);
                    font-weight: normal;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                p{
                    vertical-align: middle;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-right: vw(3);
                    color: #888;
                    display: inline-block;
                    font-size: vw(24);
                    letter-spacing: vw(1);
                }
                p:first-of-type{
                    margin-right: vw(6);
                }
                p:last-of-type{
                    width: vw(250);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .play{
                    position: absolute;
                    right: vw(30);
                .circle{
                    width: vw(40);
                    height: vw(40);
                    border: 1px solid #aaaaaa;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                span{
                    color: #aaaaaa;
                    font-size: vw(30);
                    display: block;
                    transform: rotateZ(90deg);
                    position: relative;
                    left: vw(3);
                }
            }
        }
        // 提醒下载APP
        .remind{
            width: 100%;
            height: v(330);
            position: absolute;
            bottom: v(0);
            left: 0;
            text-align: center;
            line-height: v(460);
            font-weight: bold;
            font-size: v(28);
            color: rgb(102, 102, 102);
            background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.25)0%,
            rgba(255,255,255,0.35)15%,
            rgba(255,255,255,0.55)25%,
            rgba(255,255,255,0.68)50%,
            rgba(255,255,255,0.78)60%, 
            rgba(255,255,255,0.88)75%, 
            rgba(255,255,255,0.98)85%, 
            rgba(255,255,255,1)100%
            );
        }
    }
    //加载gif图片
    .loading{
        width: 100%;
        text-align: center;
        img{
            width: 50%;
        }
    }
    //评论框
    .textCon{
        display: block;
        width: 100%;
        height: v(170);
        text-align: center;
        position: relative;
        .text{
            width: 90%;
            height: v(120);
            padding: 0 v(10);
        }
        p{
            width: v(100);
            position: absolute;
            bottom: 0;
            right: v(45);
            text-align: center;
            font-size: v(30);
            background-color: skyblue;
            color: white;
            border-radius: v(15);
        }
    }
    .comment_container{
        width: 100%;
        position: relative;
        .commentList{
            width: 100%;
            position: relative;
            padding: v(20) v(20);
            display: flex;
            justify-content: space-between;
            .img{
                width: v(80);
                height: v(80);
                border-radius: 50%;
                img{
                    width: 100%;
                    border-radius: 50%;
                }
            }
            .comments{
                width: v(600);
                .name{
                    color: rgb(129, 129, 129);
                    font-size: v(30);
                }
                .time{
                    color: rgb(177, 177, 177);
                    font-size: v(25);
                    line-height: v(40);
                }
                p{
                    line-height: v(40);
                    color: rgb(74, 74, 74);
                    font-size: v(30);
                }
            }
            .like{
                position: absolute;
                top: v(20);
                right: v(20);
                color: #bfbfbf;
                span{
                    display: inline-block   ;
                    margin-left: v(10);
                    vertical-align: middle;
                    img{
                        width: 100%;
                    }
                }
            }
        }
        .more{
            width: 100%;
            height: v(330);
            position: absolute;
            bottom: v(0);
            left: 0;
            text-align: center;
            line-height: v(460);
            font-weight: bold;
            font-size: v(28);
            color: rgb(102, 102, 102);
            background: linear-gradient(
            to bottom,
            rgba(255,255,255,0.25)0%,
            rgba(255,255,255,0.35)15%,
            rgba(255,255,255,0.55)25%,
            rgba(255,255,255,0.68)50%,
            rgba(255,255,255,0.78)60%, 
            rgba(255,255,255,0.88)75%, 
            rgba(255,255,255,0.98)85%, 
            rgba(255,255,255,1)100%
            );
        }
    }
}